<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container1">
      <button style="background-color: red">按钮一</button>
      <button>按钮二</button>
      <button>按钮三</button>
      <div class="box1">11</div>
      <div class="box2">22</div>
      <div class="box3">33</div>
    </div>

    <div class="container2">
      <button style="background-color: red">按钮一</button>
      <button>按钮二</button>
      <button>按钮三</button>
      <div class="box1">11</div>
      <div class="box2">22</div>
      <div class="box3">33</div>
    </div>
    <script>
      // 1.面向过程 ： 遵循事物发展的顺序 一步一步执行；
      // 2.面向对象 ： 分析事物中涉及的对象 ，分析对象的特征（属性，名词）和行为（方法，动词）   ---》 把对象抽象成类（构造函数，提高复用性）  ---》 研究类之间的逻辑关系
      /* 
                对象  ： 选项卡对象 
                    属性 ： 1.按钮属性  2.div属性
                    方法 ： 1.循环绑定按钮事件方法   2.div的切换方法 3.按钮的切换方法；
                约定俗成 ：大家习惯这样写 ，但是不是语法规则；
        */

      function Tab(btns, divs) {
        this.btns = btns;
        this.divs = divs;
      }

      // 循环按钮的方法
      // 循环绑定按钮事件方法
      Tab.prototype.forBtn = function () {
        console.log("this1:", this);
        // 利用一个 that 保存外部的this
        var that = this;
        this.btns.forEach(function (item, key) {
          item.onclick = function () {
            // console.log("this2:",that);
            that.switchDiv(key); // 调用 switchDiv方法
            that.switchBtn(key); // 调用切换按钮的方法；
          };
        });
      };

      // 切换div的方法
      // div的切换方法
      Tab.prototype.switchDiv = function (key) {
        var that = this;
        // forEach里的this 也会改成 window
        this.divs.forEach(function (div, k) {
          console.log(this);
          // 把下标一致的div 显示出来 ，把下标不一致的div 隐藏起来
          // 按钮的下标  key  。 div的下标 是k ，是否相同 ，如果相同就把div显示出来 ，否则 就隐藏
          if (key === k) {
            // 下标和 按钮的下标一致 ，显示div
            that.divs[k].style.display = "block";
          } else {
            that.divs[k].style.display = "none";
          }
        });
      };

      // 切换按钮的方法
      // 按钮的切换方法；
      Tab.prototype.switchBtn = function (key) {
        this.btns.forEach(function (btn, index) {
          if (index == key) {
            btn.style.background = "red";
          } else {
            btn.style.background = "";
          }
        });
      };

      var btns = document.querySelectorAll(".container1 button");
      var divs = document.querySelectorAll(".container1 div");
      var tab = new Tab(btns, divs);
      console.log(tab);
      tab.forBtn();

      var btns2 = document.querySelectorAll(".container2 button");
      var divs2 = document.querySelectorAll(".container2 div");
      var tab2 = new Tab(btns2, divs2);
      tab2.forBtn();

      // var obj = {
      //     姓名:"张三"
      // }
      // console.log(obj.姓名);
    </script>
  </body>
</html>
